<template>
    <el-dialog
            :title="title"
            :visible.sync="dialogFormVisible"
            width="700px"
            @close="close"
    >
        <el-form ref="form" label-width="80px" :model="form" :rules="rules">
            <el-form-item label="角色名称" prop="role_name">
                <el-input v-model="form.role_name"/>
            </el-form-item>
            <el-form-item label="模块列表" prop="permission">
                <el-table :data="moduleList" border fit highlight-current-row style="width: 100%">
                    <el-table-column label="模块名称" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.module_name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="选中" align="center" width="100">
                        <template slot-scope="{row}">
                            <el-checkbox :label="row.id" v-model="row.checked"><br></el-checkbox>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import {doEdit,fetchModuleList} from '@/api/manage/role'

    export default {
        name: 'RoleManagementEdit',
        data() {
            return {
                form: {},
                rules: {
                    role_name: [{required: true, trigger: 'blur', message: '请输入角色码'}],
                },
                title: '',
                dialogFormVisible: false,
                moduleList: []
            }
        },
        created() {
        },
        methods: {
            showEdit(row) {
                if (!row) {
                    this.title = '添加'
                    fetchModuleList().then(response => {
                        this.moduleList = response.data.list
                        for (var i = 0; i < this.moduleList.length; i++) {
                            this.$set(this.moduleList[i], 'checked', false)
                        }
                    })
                } else {
                    console.log(row)
                    this.title = '编辑'
                    this.form = Object.assign({}, row)
                    fetchModuleList().then(response => {
                        this.moduleList = response.data.list
                        for (var i = 0; i < this.moduleList.length; i++) {
                            this.$set(this.moduleList[i], 'checked', this.checkPermissionInArray(this.moduleList[i].id, row.permission))
                        }
                    })
                }
                this.dialogFormVisible = true
            },
            close() {
                this.$refs['form'].resetFields()
                this.form = this.$options.data().form
                this.dialogFormVisible = false
            },
            save() {
                this.form.permission=[]
                for (var i=0;i < this.moduleList.length;i++){
                  if(this.moduleList[i].checked==true)
                    this.form.permission.push(this.moduleList[i].id)
                }
                this.$refs['form'].validate(async (valid) => {
                    if (valid) {
                        const {msg} = await doEdit(this.form)
                        this.$baseMessage(msg, 'success', 'vab-hey-message-success')
                        this.$emit('fetch-data')
                        this.close()
                    }
                })
            },
            checkPermissionInArray(id, permission) {
                if (permission.indexOf(id.toString()) == -1)
                    return false
                else return true
            },
        },
    }
</script>
